import '../style/appleItem.scss'
import applePNG from '../images/apple.png'
import React from 'react'
import { useRootStore } from '../store/RootStore'
import { observer } from 'mobx-react-lite'
import { reaction } from 'mobx'

function AppleItem ({ apple }) {
  const { appleBasketStore } = useRootStore()
  reaction(
    () => apple.eated,
    (current, previous) => {
      for(let tempApple in appleBasketStore.currentApples) {
        if (appleBasketStore.currentApples[tempApple].id === apple.id) {
          appleBasketStore.currentApples.splice(tempApple, 1)
          appleBasketStore.eatedApples.push(apple)
          break;
        }
      }
    }
  )
  return (
    <div className="appleItem">
      <div className="apple"><img src={applePNG} alt=""/></div>
      <div className="info">
        <div className="name">红苹果 - {apple.id}号</div>
        <div className="weight">{apple.weight}克</div>
      </div>
      <div className="btn-div">
        <button onClick={apple.eatApple}> 吃掉 </button>
      </div>
    </div>
  )
}

export default observer(AppleItem)